<template>
	<view class="content">
		<!-- <door-navbar :isShowLeft="false"></door-navbar> -->
		<door-empty v-if="list.length == 0" text="暂无公告"></door-empty>
		<u-list @scrolltolower="scrolltolower" v-if="list.length > 0" height="calc(100vh - 100rpx)" :preLoadScreen="page * 4">
			<u-list-item v-for="(item, index) in list" :key="index" >
				<u-cell :border="false" @click="getDetail(item)">
					<view slot="title" class="u-slot-title">
						<!--<view class="title">{{item.introduce}}</view>-->
						<view v-html="item.introduce"></view>
						<view>
							<u-line color="#eee" margin="24rpx 0"></u-line>
						</view>
						<view class="label">{{item.createTime}}</view>
					</view>
					<!--<u--image v-if="item.cover" slot="right-icon" :src="item.cover" width="160rpx" height="134rpx"
						radius="8rpx">
					</u--image>-->
					<!-- <u-switch slot="right-icon" v-model="checked"></u-switch> -->
				</u-cell>
			</u-list-item>
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" color="#8588AA" fontSize="24rpx" icon-color="#8588AA" :dashed="true"
				marginTop="20" marginBottom="20" :line="true" lineColor="#8588AA" />
		</u-list>
		<door-tabbar :active="1"></door-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				total: 0,
				status: 'nomore', // loadmore / loading / nomore
				loadmoreText: '加载更多',
				loadingText: '努力加载中...',
				nomoreText: '没有更多了',
			};
		},		
		onShow() {
			if (uni.getStorageSync('userInfo')) {				
				this.getNoticeList();
			}
		},
		methods: {
			async getNoticeList() {
				let phone = '';
				if (uni.getStorageSync('userInfo')) {
					phone = JSON.parse(uni.getStorageSync('userInfo')).phone;
				}
				let res = await this.$u.api.getNoticeList({
					pageNo: this.page,
					pageSize: 10,
					phone: phone
				})
				if (this.page == 1) {
					this.list = res.data.pageData;
				} else if (this.list.length < res.data.totalDataNum) {
					let list = JSON.parse(JSON.stringify(this.list));
					this.list = list.concat(res.data.pageData);
				}
				this.total = res.data.totalDataNum;
				if (this.page >= res.data.totalPageNum) {
					this.status = 'nomore';
					if (this.page != 1) {
						this.page -= 1;
					}
				} else {
					this.status = "loadmore"
				}
			},
			scrolltolower() {
				this.status = 'loading'
				this.page += 1;
				this.getNoticeList()
			},
			getDetail(item) {
				uni.navigateTo({
					url: `/pages/mine/noticeDetail?cid=${item.id}&isHtml=true`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f9f9f9;
		padding: 0;
		// margin-top :10rpx ;
		.u-slot-title {
			
			// height: 88rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 500;
			color: #333;

			.title {
				// padding-bottom: 10rpx;
				// border-bottom: 1px solid #eee;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
			}

			.label {
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		/deep/ .u-cell__body {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		/deep/ .u-cell__title {
			width: calc(100% - 180rpx);
		}

		/deep/ .u-list-item {
			width: 90vw;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 30rpx;
			// margin-bottom: 24rpx;
			margin-top: 24rpx;
			padding:20rpx 32rpx;
			// border: 1px solid #eee;
			box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.08), 0px 2px 20px rgba(0, 0, 0, 0.04);
			// &:nth-last-child(1) {
			// 	.u-line {
			// 		border: none;
			// 	}
			// }
		}
	}
</style>
